<template>
  <div class="goods-item"
       @click="getItemDetail">
    <img v-lazy="goodsItem.show.img" alt=""
         @load="imgLoadEnd">
    <div class="more-info">
      <p>{{ goodsItem.title }}</p>
      <span>{{ goodsItem.price }}</span>
      <span><img src="~assets/img/tabBar/star.svg" alt="star">{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>

<script>

export default {
  name: "GoodsListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return null
      }
    }
  },
  methods: {
    getItemDetail() {
      //this.$router.push({path: '/detail/' + this.goodsItem.iid})
      this.$router.push({
        name: 'detail',
        params: {
          iid: this.goodsItem.iid
        }
      })
    },
    imgLoadEnd() {
      this.$bus.$emit('refresh')
    }
  }
}
</script>

<style scoped>
.goods-item img {
  width: 100%;
  border-radius: 5px;
}

.more-info {
  text-align: center;
  padding: 5px 0;
}

.more-info p {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
  font-size: 14px;
}

.more-info span:nth-of-type(1) {
  color: var(--color-high-text);
}

.more-info span:nth-of-type(2) {
  margin-left: 10px;
}

.more-info span:nth-of-type(2) > img {
  width: 14px;
  height: 14px;
}
</style>